<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3_动画</title>
    <style>
        .box{
            width: 700px;
            height: 100px;
            border: 1px solid red;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: #888;
            animation-name: move;
            animation-duration: 2s;
            animation-delay: 2s;
            animation-timing-function: ease-in-out;
            border-radius: 50%;
            animation-iteration-count: 10;
            animation-direction: alternate;
            animation-fill-mode: backwards ;
        }
        @keyframes move{
            from{

            }
            50%{
                width: 350px;
            }
            to{
                width: 500px;
            }
        }
    </style>
</head>
<body>
<!--
       动画：
            帧:一段动画，就是一段时间内连续播放n个画面。每一张画面，我们它叫做“帧”。一定时间内连续快速播放若干个帧，就成了人眼中所看到的动画。同样时间内，播放的帧数越多，画面看起来越流畅。
            关键帧：关键帧指的是，在构成一段动画的若干顿中，起到决定性作用的2-3帧。
        实现步骤：
            第一步：定义关键帧(定义动画)
                1.简单定义：
                    @keyframes 动画名{
                        from{
                            property1:value1;
                            property2:value2;
                        to{
                            property1:value1;
                        }
                    }
                2.复杂定义：
                    @keyframes 动画名{
                        0%{
                            property1:value1;
                        }
                        20%{
                            property1:value1;
                        }
                        40%{
                            property1:value1;
                        }
                        60%{
                            property1:value1;
                        }
                        80%{
                            property1:value1;
                        }
                        100%{
                            property1:value1;
                        }
                    }
            动画的其他属性
                1.animation-timing-function
                        作用：定义过渡效果的速度曲线。
                        常用值：
                            linear:匀速
                            ease:默认值，先慢后快
                            ease-in:先快后慢
                            ease-out:先慢后快
                            ease-in-out:先快后慢再快后慢
                            step-start:跳帧开始
                            step-end:跳帧结束
                            steps(a,b):接受两个参数的步进函数，第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数默认值为end。
                            cubic-bezier(n,n,n,n):自定义速度曲线
                                列表：
                                    如果想让所有属性都使用一个速度曲线，就写一个值
                                    如果想让多个属性使用一个速度曲线，就写多个值，并且一一对应。
                                    如果想让多个属性使用不同的速度曲线，就写多个值，并且一一对应。
                2.animation-iteration-count
                        作用：定义动画的播放次数。
                            常用值：
                                number:播放一次
                                infinite:无限次播放
                3.animation-direction
                        作用：定义动画的播放方向。
                                normal:默认值，正常播放（默认）
                                reverse:反向播放
                                alternate:先正向播放，再反向播放，并持续交替运行
                                alternate-reverse:先反向播放，再正向播放，并持续交替运行
                4.animation-fill-mode
                        作用：设置动画之外的状态
                                forwards:设置对象状态为动画结束时的状态
                                backwards:设置对象状态为动画开始时的状态
                5.animation-play-state
                        作用：设置动画的播放状态。
                                paused:暂停播放
                                running:运行播放 (默认值)
                6.动画的复合属性:
                        只设置一个时间表示 duration ，设置两个时间分别是: duration 和 delay，其他属性没有数量和顺序要求。
                        .box1{
                            animation: move 3s 0.5s linear 2 alternate-reverse forwards;
                        }
                注意点:animation-play-state一般单独使用。
-->
    <div class="box"><div class="box1">1</div></div>
</body>
</html>